<template>
  <div class="case-list-warp">
    <ul class="p-list">
      <li v-for="i in 4" :key="i">
        <div class="p-item-img">
          <img
            src="http://xlylf-hlj.oss-cn-hangzhou.aliyuncs.com/com/1120/usr/ea7aba75951f46a7a2b457ffd87478d6.png"
            alt
          >
          <div class="p-qjt">360°全景</div>
        </div>
        <div class="p-item-name">周店106</div>
        <div class="p-item-txt">
          <span>106㎡</span>
          <span>12.60万</span>
          <span>NO: 10006285</span>
        </div>
        <div class="com-name">武汉梵客家居科技有限公司</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss">
.p-list {
  width: 100%;
  box-sizing: border-box;
  padding: 0 12px;
  background: #fff;
  list-style-type: none;
  > li {
    padding: 12px 0;
    .p-item-img {
      width: 100%;
      height: 209px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      .p-qjt {
        position: absolute;
        left: 0;
        top: 12px;
        font-size: 12px;
        padding: 0 10px;
        line-height: 16px;
        background: #f39604;
        color: #fff;
      }
    }
    .p-item-name {
      margin: 16px 0 12px;
      color: #333;
      font-size: 16px;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .p-item-txt {
      display: flex;
      position: relative;
      color: #7f7f7f;
      font-size: 14px;
      span {
        margin-right: 16px;
        line-height: 1;
      }
    }
    .com-name {
      font-size: 14px;
      color: #7f7f7f;
      margin-top: 12px;
    }
  }
}
</style>
